import { message } from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "umi";
import instance from "../../utils/instance";
import "../Login/Login.css";
const BackgroundImage = () => {
  const backgroundImageUrl =
    "https://ts1.cn.mm.bing.net/th/id/R-C.e2bd360e39aa770312471c00763e04c2?rik=N1B2iHJfey8Okg&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f201432094231%2f13.jpg&ehk=kwF94Zf%2biVxBmiYLcW%2fXFnaMbXYZvNP8i5e4rQIGdeE%3d&risl=&pid=ImgRaw&r=0";
  const backgroundStyle = {
    backgroundImage: `url(${backgroundImageUrl})`,
    backgroundSize: "cover",
    height: "100vh",
  };
  const [messageApi, contextHolder] = message.useMessage();
  const usestate = useNavigate();
  //登录
  //定义登录表单数据
  const [username, setusername] = useState();
  const [passwrok, setpasswrok] = useState();
  const [Randomver, setRandomver] = useState();
  //input赋值
  function usernamemk(e: any) {
    setusername(e.target.value);
  }
  function passwrokmk(e: any) {
    setpasswrok(e.target.value);
  }
  function Randomverific(e: any) {
    setRandomver(e.target.value);
  }
  function loginfa() {
    //浅拷贝
    let brr = [...Randomverification];
    //定义空数组
    let crr: any[] = [];
    //循环添加进新数组
    for (let i = 0; i <= brr.length - 1; i++) {
      crr.push(brr[i].sum);
    }
    //转字符串
    let ncrr = crr.join("");
    //当验证码正确时
    if (ncrr == Randomver) {
      //像后端传递账号密码
      let msg = {
        username: username,
        passwrok: passwrok,
      };
      let obj = { msg };
      instance.post("/api/Longin", obj).then((res) => {
        //判断后端返回值
        if (res.data.message == "登陆成功") {
          messageApi.open({
            type: "success",
            content: "登录成功",
          });
          //定义存储本地token数据
          let message = {
            username: username,
            passwrok: passwrok,
            exports: res.data.exports,
            timese: res.data.timese,
          };
          //转字符串进行本地存储并跳转首页
          let token: any = JSON.stringify(message);
          window.localStorage.setItem("token", token);
          setTimeout(() => {
            window.location.reload();
          }, 2000);
        } else if (res.data.message == "密码错误") {
          //密码错误
          messageApi.open({
            type: "error",
            content: "密码错误",
          });
        } else {
          messageApi.open({
            type: "warning",
            content: "用户名不存在",
          });
        }
      });
    } else {
      //验证码不正确时
      messageApi.open({
        type: "error",
        content: "验证码有误",
      });
    }
  }
  //切换
  function Switchvalidation() {
    instance.post("/api/Randomverification").then((res) => {
      setRandomverification(res.data);
    });
  }
  //验证码数据
  const [Randomverification, setRandomverification] = useState([
    { sum: "111" },
  ]);
  useEffect(() => {
    instance.post("/api/Randomverification").then((res) => {
      setRandomverification(res.data);
    });
  }, []);

  return (
    <div>
      <div
        className="loginc"
        style={{ width: "100vw", height: "100vh", backgroundColor: "red" }}
      >
        {/* 登录 */}
        <div
          className="login"
          style={{ zIndex: "5", width: "25vw", height: "45vh" }}
        >
          <h1>管理中心登录</h1>
          <div className="loginmk">
            <input
              onChange={usernamemk}
              type="text"
              placeholder="这里输入用户名."
            />
            <input
              onChange={passwrokmk}
              type="password"
              placeholder="这里输入密码."
            />
            <input
              type="text"
              placeholder="输入右侧验证码."
              onChange={Randomverific}
            />
            <div
              className="tubuifawoida"
              onClick={Switchvalidation}
              style={{ textAlign: "center" }}
            >
              {Randomverification.map((item: any, index) => {
                return (
                  <span
                    key={index + 15646}
                    style={{
                      color: item.color,
                      fontSize: "2.2vw",
                      margin: "0 3px",
                      transform: `rotate(${item.jiaodu}deg)`,
                      display: "inline-block",
                    }}
                  >
                    {item.sum}
                  </span>
                );
              })}
            </div>
            <button className="loginic" onClick={loginfa}>
              立即登录
            </button>
          </div>
        </div>
        <div style={backgroundStyle} className="imgh"></div>
      </div>
      {contextHolder}
    </div>
  );
};

export default BackgroundImage;
